<template>
  <div class="app-container">
    <el-dialog title="提示" :visible.sync="isShow" width="500px" :fullscreen="device == 'mobile'">
      <el-form ref="form" :model="form" :rules="rules" label-width="130px"
               :label-position="device == 'mobile' ? 'top' : 'right'">
        <el-form-item label="照片是否审核通过" prop="isPass" v-if="workorderInfo.type == '调试验收'">
          <el-select v-model="form.isPass" placeholder="请选择照片是否审核通过" style="width: 100%;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备是否已恢复" prop="isNormal" v-if="workorderInfo.type == '现场维修' || workorderInfo.type == '售后维修'">
          <el-select v-model.trim="form.isNormal" placeholder="请选择设备是否已恢复正常状态" style="width: 100%;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="对博诺的建议" prop="suggestCompany">
          <el-input v-model.trim="form.suggestCompany" :maxLength="200" type="textarea"
                    :autosize="{ minRows: 2, maxRows: 6 }" placeholder="请输入对博诺的建议"/>
        </el-form-item>
        <el-form-item label="设备改进建议" prop="suggestDevice">
          <el-input v-model.trim="form.suggestDevice" :maxLength="200" type="textarea"
                    :autosize="{ minRows: 2, maxRows: 6 }" placeholder="请输入对设备的改进建议"/>
        </el-form-item>
        <el-form-item label="其他需求" prop="otherNeed">
          <el-input v-model.trim="form.otherNeed" :maxLength="200" type="textarea"
                    :autosize="{ minRows: 2, maxRows: 6 }" placeholder="请输入您的其他需求"/>
        </el-form-item>
        <el-form-item label="回访的帮助" prop="returnVisit" v-if="workorderInfo.type == '售后走访'">
          <el-input v-model.trim="form.returnVisit" :maxLength="200" type="textarea"
                    :autosize="{ minRows: 2, maxRows: 6 }" placeholder="请输入此次回访对您有哪些帮助"/>
        </el-form-item>
        <el-form-item label="服务评价" prop="evaluate">
          <div style="min-height: 36px;display: flex; align-items: center;">
            <el-input v-model="form.evaluate" type="textarea" :maxLength="200" :autosize="{ minRows: 2, maxRows: 6 }" placeholder="请输入服务评价"/>
<!--            <el-rate v-model="form.evaluate" show-text style="width: 100%;" :colors="colors"/>-->
          </div>
        </el-form-item>
        <el-form-item label="服务打分" prop="mark">
          <el-select v-model="form.mark" placeholder="请选择" style="width: 100%;">
            <el-option v-for="(item, i) in scoreList" :key="i" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户签名" prop="image">
          <div v-if="form.image">
            <img :src="form.image" alt="" srcset="" style="object-fit: contain;width: 100%;height: 100%;">
          </div>
          <el-button type="primary" @click="openSign">{{ form.image ? '重 签' : '签 名' }}</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <SignImgDialog v-if="signVisible" ref="SignImg" :lineWidth='3' :isDefault='0' @close="closeDialog"/>
  </div>
</template>

<script>
import {addDataApi} from "@/api/components/receiptInfo"
import {mapGetters} from 'vuex'
import SignImgDialog from "./SignImgDialog.vue"
import {uploadImgApi} from "@/api/after/serve";

export default {
  name: "ReceiptInfo",
  components: {SignImgDialog},
  props: {
    workorderInfo: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      env: process.env.VUE_APP_STATIC_API || '',
      // 签名弹窗
      signVisible: false,
      textarea2: "",
      // 弹窗显示
      isShow: false,
      scoreList: [10, 9, 8, 7, 6, 5, 4, 3, 2, 1], // 分值
      // 表单校验规则
      rules: {
        isPass: [
          {required: true, message: '请选择照片是否通过', trigger: 'change'}
        ],
        suggestCompany: [
          {required: true, message: '请输入对博诺的建议', trigger: 'blur'}
        ],
        suggestDevice: [
          {required: true, message: '请输入对设备的改进建议', trigger: 'blur'}
        ],
        otherNeed: [
          {required: true, message: '请输入其他需求', trigger: 'blur'}
        ],
        returnVisit: [
          {required: true, message: '请输入回访对您的帮助', trigger: 'blur'}
        ],
        evaluate: [
          {required: true, message: '请您对本次服务做出评价', trigger: 'change'}
        ],
        mark: [
          {required: true, message: '请您对本次服务进行打分', trigger: 'change'}
        ],
        image: [
          {required: true, message: '请签名', trigger: 'change'}
        ],
        isNormal: [
          {required: true, message: '请选择设备是否已恢复正常状态', trigger: 'change'}
        ],
      },
      // 表单数据
      form: {
        id: null,
        workorderId: null,
        isPass: "", // 照片是否通过（已通过、未通过）
        suggestCompany: "", // 对博诺的建议
        suggestDevice: "", // 对设备的改进建议
        otherNeed: "", // 其他需求
        returnVisit: "", // 回访对您的帮助
        evaluate: "", // 对本次服务评价
        mark: null, // 对本次打分（1-10）
        image: null, // 客户签名（存储图片路径）
        remark: "", // 备注
      },
      // 评分颜色过渡
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      // 是否选项
      options: [
        {
          value: '是',
          label: '是'
        }, {
          value: '否',
          label: '否'
        }
      ],
    }
  },
  watch: {
    workorderInfo: {
      deep: true,
      handler(newV) {
        // console.log(newV);
        this.form.workorderId = newV.id ?? +this.$route.query.workorderId ?? null
      }
    },
  },
  computed: {
    ...mapGetters([
      'device'
    ]),
  },
  mounted() {

  },
  methods: {
    base64ImgtoFile(dataurl, fileName = 'file') {
      const arr = dataurl.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const suffix = mime.split('/')[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], `${fileName}.${suffix}`, { type: mime })
    },
    // 上传图片
    async uploadImg() {
      const file = this.base64ImgtoFile(this.form.image)
      const formData = new FormData()
      formData.append('file', file)
      const { fileName } = await uploadImgApi(formData)
      this.form.image = fileName
    },
    // 关闭签名弹窗
    closeDialog({res}) {
      this.form.image = res
      this.signVisible = false
    },
    // 打开签名弹窗
    openSign() {
      this.signVisible = true
      this.$nextTick(() => {
        this.$refs.SignImg.init()
      })
    },
    // 确定的回调
    handleConfirm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          await this.uploadImg()
          // 更新工单
          const res = await addDataApi(this.form)
            .catch(() => {
            })
          if (res.code === 200) {
            // 关闭弹窗
            this.$emit('add')
            this.isShow = false
          }
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
